<template>
  <div class="layui-fluid">
    <div class="layui-card">
      <div
        class="layui-form layui-card-header layuiadmin-card-header-auto"
        style="padding: 15px 15px 0px 15px"
      >
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
              <input
                type="text"
                v-model.trim="user.username"
                placeholder="请输入用户名"
                class="layui-input"
              />
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
              <input
                type="text"
                v-model.trim="user.realName"
                placeholder="请输入姓名"
                class="layui-input"
              />
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">身份证号码</label>
            <div class="layui-input-block">
              <input
                type="text"
                v-model.trim="user.idCard"
                placeholder="请输入身份证号码"
                class="layui-input"
              />
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">单位</label>
            <div class="layui-input-block">
              <input
                type="text"
                v-model.trim="user.orgId"
                placeholder="请选择单位信息"
                class="layui-input"
              />
            </div>
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">拥有角色</label>
            <div class="layui-input-block">
              <input
                type="text"
                v-model.trim="user.roleId"
                placeholder="请选择用户拥有的角色"
                class="layui-input"
              />
            </div>
          </div>
          <div class="layui-inline">
            <button
              class="layui-btn"
              lay-submit=""
              lay-filter="search"
              id="search"
            >
              <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
            </button>
          </div>
        </div>
      </div>
      <div class="layui-card-body">
        <div style="padding-bottom: 10px">
          <button
            class="layui-btn layui-btn-sm layuiadmin-btn-admin"
            v-on:click="add"
          >
            <i class="layui-icon">&#xe608;</i>
            添加用户
          </button>
          <button
            class="layui-btn layui-btn-sm layui-btn-danger"
            url="${ctxPath}/manager/delUser.do"
            layui-delete="deleteUser"
            field="id"
            table="dataTable"
          >
            <i class="layui-icon">&#xe640;</i>
            删除所选用户
          </button>
        </div>
        <table id="dataTable" lay-filter="tableEvent"></table>
      </div>
    </div>
    <div id="barDemo" style="display: none">
      <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
      <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"
        >删除</a
      >
    </div>
  </div>
</template>
<script type="text/x-template" id="barDemo">
</script>
<script>
export default {
  name: "UserList",
  id:"userListPageId",
  data: function () {
    return {
      user: {},
      editPageIndex:null,
      cols:[
        [
          {
            type: "checkbox",
            field: "id",
            align: "center",
          },
          {
            field: "username",
            title: "用户名",
            align: "center",
          },
          {
            field: "petName",
            title: "昵称",
            align: "center",
          },
          {
            field: "theDayErrorNumber",
            title: "当日是否锁定",
            align: "center",
            templet: function (res) {
              if (
                res.theDayErrorNumber>=5
              ) {
                return "<span>是</span>";
              } else {
                return (
                  "<div>否</div>"
                );
              }
            },
          },
          {
            field: "lastLoginTime",
            title: "最后登录时间",
            align: "center",
            templet: function (res) {
              if (
                res.lastLoginTime == null ||
                res.lastLoginTime == "" ||
                typeof res.lastLoginTime == "undefined"
              ) {
                return "<span></span>";
              } else {
                return (
                  "<div>" +
                  layui.util.toDateString(
                    res.lastLoginTime,
                    "yyyy-MM-dd- HH:mm:ss"
                  ) +
                  "</div>"
                );
              }
            },
          },
          {
            field: "registerDate",
            title: "注册时间",
            align: "center",
            templet:
              "<div>{{layui.util.toDateString(d.registerDate, 'yyyy-MM-dd- HH:mm:ss')}}</div>",
          },
          {
            field: "org",
            title: "单位",
            align: "center",
            templet: function (res) {
              if (
                res.org == null ||
                res.org == "" ||
                typeof res.org == "undefined"
              ) {
                return "<span></span>";
              }
              if (
                res.org.desc == null ||
                res.org.desc == "" ||
                typeof res.org.desc == "undefined"
              ) {
                return "<span></span>";
              }
              return "<span>" + res.org.desc + "</span>";
            },
          },
          {
            fixed: "right",
            title: "操作",
            align: "center",
            toolbar: "#barDemo",
          },
        ],
      ]
    };
  },
  mounted: function () {
    this.initLayui();
    this.queryUserList();

    var that = this;

    window.refreshTable = function(){
     that.closeOpen(this.editPageIndex);
     that.renderTable();
    }
  },
  methods: {
    queryUserList: function () {
      var obj = {};
      obj.url = this.userManager + "/userList";
      obj.cols = this.cols;
      obj.tableId = "dataTable";
      obj.where = {};
      this.renderTable(obj); //其中url tableId以及cols为必传其他参数个性化参数请参考layui数据表格
    },
    edit: function (data, that) {
      var thet = this;
      this.openPage(
        {
          url: "/upms/userManager/userEdit?userId="+data.id,
          title: "编辑用户",
          width:"50%",
          end:function(){
            thet.queryUserList();
          }
        }
      );
    }, 
    add: function (data, that) {
      var thet = this;
      this.openPage(
        {
          url: "/upms/userManager/userEdit",
          title: "增加用户",
          width:"50%",
          end:function(){
            thet.queryUserList();
          }
        }
      );
    }, 
    del: function (data, that) {
     this.showMsg("目前不能删除用户id"+data.id);
    },
  },
};

</script>